<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="680px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    title="当天体温趋势图"
    @update:visible="updateVisible">
    <el-card
          shadow="never"
          body-style="padding: 10px 5px 0 0;">
          <div class="card-title" v-if="data">
            <span>学生:{{data.name}}</span><span>学号:{{data.student_no}}</span><span>年级:{{data.grade_name}}</span>
            <span>班级:{{data.class_name}}</span><span>学校:{{data.schoole_name}}</span>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="visitHourChartOption"/>
        </el-card>
    <div slot="footer">
      <el-button
        @click="updateVisible(false)">取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';
export default {
  components: { EleChart},
  name: 'temperatureLook',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      visitHourData:[]
    };
  },
  computed: {
     // 最近1小时访问情况折线图配置
    visitHourChartOption() {
      if (this.visitHourData&&this.visitHourData.length > 0) {
        return {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['心率'],
           right: '50%'
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.visitHourData.map(d => this.$util.toDateString(d.create_time))
            }
          ],
          yAxis: [
            {
              type: 'value',
              data: [0, 50, 100, 150, 200]
            }
          ],
          series: [
            {
              name: '体温',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              areaStyle: {
                opacity: 0.5
              },
              data: this.visitHourData.map(d => d.temperature)
            },
          ]
        }
      } else { 
        return {}
      }
      
    }
  },
  watch: {
    data: {
      handler: function (newVal) { 
        if (newVal) { 
          this.getTemperature(newVal)
        }
      },
      deep: true,
      immediate:true
    }
  },
  mounted() {
  },
  methods: {
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    getTemperature(data) { 
      this.$http
        .get("/studentworklog/getTemperature", { params: { student_id: data.student_id,belong_time:this.$parseTime( data.belong_time) } })
        .then(res => {
          this.visitHourData = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    }
  }
}
</script>

<style scoped>
.card-title span{
  margin-right: 30px;
}
</style>
